<template>
  <div class="echart-block">
    <el-card class="box-card c-r">
      <div slot="header" class="clearfix">
        <span>空气湿度</span>
      </div>
      <div class="text item">
        <div id="first-echarts" class="echarts"></div>
      </div>
    </el-card>
    <el-card class="box-card c-r">
      <div slot="header" class="clearfix">
        <span>光照</span>
      </div>
      <div class="text item">
        <div id="second-echarts" class="echarts"></div>
      </div>
    </el-card>
    <el-card class="box-card c-r">
      <div slot="header" class="clearfix">
        <span>气压</span>
      </div>
      <div class="text item">
        <div id="third-echarts" class="echarts"></div>
      </div>
    </el-card>
    <el-card class="box-card c-r">
      <div slot="header" class="clearfix">
        <span>土壤湿度</span>
      </div>
      <div class="text item">
        <div id="fouth-echarts" class="echarts"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { $sensorCount } from "@/api/index.js";

export default {
  name: "Echarts",
  data() {
    return {
      // 对于从后台获取的对象，需要现在变量里定义一个默认值，为了渲染不报错
      deviceObj: {
        LoRaPP: "",
        LoRaWAN: "",
        group: "",
        sensor: "",
      },
    };
  },
  mounted() {
    this.getSensor();
  },
  methods: {
    getSensor() {
      $sensorCount().then((res) => {
        this.firstEchart(res.data.data);
        this.secondEchart(res.data.data);
        this.thirdEchart(res.data.data);
        this.fouthEchart(res.data.data);
      });
    },
    firstEchart(data) {
      let myChart = this.$echarts.init(
        document.getElementById("first-echarts")
      );
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        grid: {
          top: 30,
        },
        series: [
          {
            data: data.air,
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    secondEchart(data) {
      let myChart = this.$echarts.init(
        document.getElementById("second-echarts")
      );
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        grid: {
          top: 30,
        },
        series: [
          {
            data: data.beam,
            type: "bar",
          },
        ],
      });
    },
    thirdEchart(data) {
      let myChart = this.$echarts.init(
        document.getElementById("third-echarts")
      );
      myChart.setOption({
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [30, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: data.pressure,
          },
        ],
      });
    },
    fouthEchart(data) {
      let myChart = this.$echarts.init(
        document.getElementById("fouth-echarts")
      );
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        grid: {
          top: 30,
        },
        series: [
          {
            data: data.soil,
            type: "line",
            smooth: true,
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-card {
  /deep/ .el-card__header {
    padding: 10px 10px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }
}

.echart-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 20px;
  .box-card {
    margin-top: 10px;
    width: 49%;
    &:nth-of-type(odd) {
      margin-right: 1%;
    }
  }
}

.echarts {
  height: 300px;
  width: 100%;
}
</style>
